{% extends "resume/base.html" %}
{% load widget_tweaks %}
{% block title %}Sign in{% endblock %}

{% block content %}
  <div class="max-w-md mx-auto bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-sm p-8 space-y-6">
    <header class="space-y-1 text-center">
      <h1 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">Welcome back</h1>
      <p class="text-sm text-gray-600 dark:text-gray-400">Sign in to access your resume workspace.</p>
    </header>
    <form method="post" class="space-y-5">
      {% csrf_token %}
      {% if next %}
        <input type="hidden" name="{{ redirect_field_name|default:'next' }}" value="{{ next }}">
      {% endif %}
      {% if form.non_field_errors %}
        <div class="rounded-lg border border-red-200 bg-red-50 px-4 py-2 text-sm text-red-800">
          {{ form.non_field_errors }}
        </div>
      {% endif %}
      <div class="space-y-2">
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="{{ form.username.id_for_label }}">Email or username</label>
        {{ form.username|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]" }}
      </div>
      <div class="space-y-2">
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="{{ form.password.id_for_label }}">Password</label>
        {{ form.password|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]" }}
      </div>
      <button type="submit"
              class="w-full rounded-lg bg-[#758A93] px-4 py-2 text-sm font-semibold text-white shadow hover:bg-[#667880]">
        Sign in
      </button>
    </form>
    <p class="text-center text-xs text-gray-500 dark:text-gray-400">
      Need an account? <a class="underline" href="{% url 'signup' %}">Create one here</a>.
    </p>
  </div>
{% endblock %}